import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const BarChart=({title})=>{
    const charRef=useRef()
    useEffect(()=>{
        const chartDom = charRef.current
        const myChart = echarts.init(chartDom);
        const option = {
            title:{
                text:title
            },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
            type: 'category',
            data: ['Vue', 'React', 'Angular'],
            axisTick: {
                alignWithLabel: true
            }
            }
        ],
        yAxis: [
            {
            type: 'value'
            }
        ],
        series: [
            {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [100, 90, 80]
            }
        ]
        };

        option && myChart.setOption(option);
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    return (
        <div ref={charRef} style={{width:'500px',height:'400px'}}></div>
    )
}

export default BarChart